<template>
    <div>
        <v-header @goPersonal="toPersonal()"></v-header>
        <div class="detail_info">
            <div class="detail_info_title">{{detail.mername}}</div>
            <div class="detail_info_time">
                <div>营业时间：{{detail.open}}-{{detail.close}}</div>
                <div v-show="detail.coordinate!= ''">距离{{detail.coordinate}}km</div>
            </div>
            <div class="detail_info_address">
                <div class="detail_info_address_left" @click="map()">
                    <div class="map_logo"><img src="../assets/address_01.png" alt=""></div>
                    <div class="map_word">{{detail.address}}</div>
                </div>
                <div class="detail_info_address_right">
                    <a :href="'tel:'+detail.tel"><img src="../assets/mobile.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="detail_info_card">
            <div class="detail_imgcard">
                <div class="cardimages" v-for="(item, index) in detail.title_img" :key="index">
                    <img :src="item" alt="" >
                </div>
            </div>
            <div class="detail_word">
                {{detail.content}}
            </div>
        </div>
        <div v-show="plus" class="kong"></div>
        <v-footer @judge="toData('renewal',0)" :member="status"></v-footer>
    </div>
</template>
<script>
import header from '@/components/common/header'
import footer from '@/components/common/footer'
import cookie from '../../store/modules/cookie'
import common from '../../store/modules/common.js'
import wx from 'weixin-js-sdk'
export default {
    components: {
        'v-header': header,
        'v-footer': footer
    },
    data () {
        return {
            // popupVisible:false,
            plus:true,
            images:[
                {img:require("../assets/detail.jpg")},
                {img:require("../assets/detail.jpg")},
                {img:require("../assets/detail.jpg")}
            ],
            merid:0,
            status:-1,
            detail:{
                coordinate:''
            }
        }
    },
    created(){
        this.merid = this.$route.query.merid,
        this.getdata(this.merid)
        this.getmember()
    },
    methods:{
        show(){
            this.popupVisible = true
        },
        goto(){
            this.$router.push({
                path:'/recordList'
            })
        },
        getdata(merid){
            let that = this
            that.$http.post('user/merchant/show',{merid:merid}).then((res)=>{
                if(res.code == 0){
                    if(res.data.title_img){
                         res.data.title_img = res.data.title_img.split(',')
                    }                   
                    for(var i in res.data.title_img){
                        res.data.title_img[i] = common.state.baseUrl + res.data.title_img[i]
                    }
                    if(this.$route.query.len){
                         res.data.coordinate = parseFloat(this.$route.query.len).toFixed(2)
                    }else{
                        res.data.coordinate = ''
                    }                   
                    that.detail = res.data
                }else{

                }

            }).catch((res)=>{

            })
        },
        //判断是否是会员
        getmember(){
            let that = this
            let openid = cookie.getCookie('openid')
            that.$http.post('/user/index/getMemberType',{openid:openid}).then((res)=>{
                if(res.code == 0){
                    that.status = res.data.status
                }else{
                    that.$messagebox(res.msg)
                }
            })
        },
        toData(path,typeid){
            if(this.status ==-1){
                this.$router.push({
                    path:path,
                    query:{
                        typeid:typeid
                    }
                })
            }else{
                this.$router.push({
                    path:'/',
                }) 
            } 
        },
        toPersonal(){
            this.$router.push({
                path:'/my'
            })
        },
        map(){
            // var index = this.$indicator.open({spinnerType: 'fading-circle'});
            let that = this
            let url = window.location.href.split('#')[0]
            that.$http.post('merchant/Scanqrcode/index',{url:url}).then((res)=>{
                if(res.code == 0){
                    wx.config({
                        debug: false,
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        jsApiList: ['openLocation']
                    });
                    wx.ready(function(){
                        // that.$indicator.close(index);
                        wx.openLocation({                          
                            latitude: parseFloat(that.detail.latitude), // 纬度，浮点数，范围为90 ~ -90
                            longitude: parseFloat(that.detail.longitude), // 经度，浮点数，范围为180 ~ -180。
                            name: that.detail.mername, // 位置名
                            address: that.detail.address, // 地址详情说明
                            scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
                            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转                            
                        });
                    })
                    wx.error(function(data){
                        that.$indicator.close(index);
                        that.$messagebox('失败');
                    });
                }
            })
        }
    }
}
</script>
<style scoped>
.detail_info{
    padding: 44px 0 0 0;
}
.detail_info_title{
    font-size: 52px;
    line-height: 52px;
    color: #2D2D2D;
    font-weight: bold;
    padding: 0 48px 0 58px;
}
.detail_info_time{
    color: #000;
    font-size: 42px;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    padding: 42px 48px 28px 58px;
    border-bottom: 1px solid #EAECED;
}
.detail_info_address{
    padding: 30px 53px 34px 58px;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
}
.detail_info_address_left{
    font-size: 42px;
}
.map_logo{
    float: left;
    width: 65px;
}
.map_word{
    float: left;
    width: 750px;
    margin-left: 20px;
}
.detail_info_address_left img{
    width: 65px;
    height: 52px;
}
.detail_info_address_right{
    border-left: 1px solid #EAECED;
    padding-left: 52px;
}
.detail_info_address_right img{
    width: 63px;
    height: 54px;
}
.detail_info_card{
    border-top: 22px solid #EAECED;

}
.detail_imgcard{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: space-around;
    padding:0px 31px 31px 31px;
    border-bottom: 6px solid #EAECED;
}
.cardimages{
 padding: 31px 0px 0px;
}
.cardimages img{
    width: 100%;
    height: 100%;
}
.detail_word{
    padding: 31px;
    text-indent: 96px;
    line-height: 61px;
    font-size: 42px;
}
.kong{height: 249px;}
</style>